<template>
	<div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>系统日志</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
		<div class="container">
			<div class="handle-box">
				<div>
					<el-form :inline="true" :model="rzForm" class="demo-form-inline">
                        <el-form-item label="时间:">
                            <el-date-picker v-model="rzForm.time" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                            type="datetimerange" range-separator="至" start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
						<el-form-item>
							<el-button @click="resetForm">重置</el-button>
							<el-button type="primary" @click="submitForm">查询</el-button>
						</el-form-item>
					</el-form>
				</div>

			</div>

			<el-table :data="rzList" v-loading="loading" border max-height="650" highlight-current-row :row-style="{height: '20px'}"
				:header-cell-style="{background:'#e6e6e6',color:'#000000'}" @row-click="handle" ref="multipleTable">
				<el-table-column v-for="(item,index) in rzTableLabel" :key="index" :prop="item.prop" :width="item.width"
					:label="item.label">
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>


	</div>
</template>

<script>
	export default {
		name: 'roles',
		data() {
			return {
				title: '系统日志',

				formInline: {
					user: '',
					region: ''
				},
				rzList: [

				], //管理员列表模拟数据
                rzForm: {
                    time: ''
                },
                // 操作日志表头表格
                rzTableLabel: [{
                    label: '操作时间',
                    width: '',
                    prop: 'created_at'
                },
                    {
                        label: '系统渠道',
                        width: '',
                        prop: 'channel'
                    },
                    {
                        label: '说明',
                        width: '',
                        prop: 'content'
                    }
                ],


				loading: false,
				id: '',
				page: 1,
				limit: 10,
				total: 0,
			}
		},
        created() {
            // 获取客户列表
            this.getRzlist(this.page, this.limit);
        },
        activated() {
		    // 获取客户列表
            this.getRzlist(this.page, this.limit);
		},

		methods: {

			// 分页
			handleSizeChange(size) {
				this.limit = size
				this.getRzlist(this.page, this.limit, this.rzForm.time);
			},
			handleCurrentChange(index) {
				this.page = index
				this.getRzlist(this.page, this.limit, this.rzForm.time);
			},
			// 点击查询按钮
			submitForm() {
				this.getRzlist(this.page, this.limit, this.rzForm.time);
			},
			// 点击重置按钮
			resetForm() {
				this.rzForm.time = [];
				this.getRzlist(1, 10);
			},
			// 获取客户管理列表
			getRzlist(page, limit, name) {
				let params = {
					page: page,
					per_page: limit,
				}
                if(name!==undefined){
                    params.start_time = name[0];
                    params.end_time = name[1];
                }
				this.$get(this.$api.getSystemLog, params).then(res => {
					if (res.code == 200) {
						this.total = res.data.total
						let arr = res.data.data
						let arrList = []
						arr.forEach((item, index) => {
							arrList.push(Object.assign({}, item, {
								'xuhao': index + 1
							}))
						})
						this.rzList = arrList
						this.loading = false
					} else {
						this.$message.error(res.msg);
					}

				}).catch(e=>{
                    console.log(e);
                })
			},
		}
	}
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
		display: flex;
		/* border: 1px solid red; */
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	/deep/ .isshow .el-upload--picture-card {
		display: none
	}
</style>
